<template>
  <div class="title-bar-layout hor-layout-side-center">
    <div class="title-left-action-layout hor-layout-center" :style="titleActionLayoutStyle">
      <el-icon v-if="pageData.platform=='window'" :size="16" color="#ffffff" @click="closeApp()">
        <CircleCloseFilled />
      </el-icon>
      <el-icon :size="15" color="#ffffff" @click="settingActionClick('/home')">
        <HomeFilled/>
      </el-icon>
      <el-icon :size="15" color="#ffffff" @click="settingActionClick('/setting')">
        <Setting/>
      </el-icon>
    </div>
    <div class="title-text-view">{{ pageData.title }}</div>
  </div>
  <!-- 设置弹窗 -->
  <el-dialog
    v-model="pageData.dialogVisible"
    center
    title="设置"
    width="80%"
    :before-close="handleClose"
  >
    <div class="project-setting-layout ver-layout-center">
      <el-button
        size="small"
        type="primary"
        class="project-setting-item"
        @click="settingActionClick('/setPath')"
      >
        项目管理配置
      </el-button>
      <el-button
        size="small"
        type="primary"
        class="project-setting-item"
        @click="settingActionClick('/setTag')"
      >
        设置项目标签
      </el-button>
    </div>
    <template #footer>
      <div style="display: none" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false"> Confirm</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {computed, onMounted, reactive} from 'vue'
import {managePlugin} from '../plugins/managePlugin'
import {useRouter} from 'vue-router'

const mRouter = useRouter()

const pageData = reactive({
  title: '',
  platform: "",
  dialogVisible: false
})

//操作按钮事件
const actionBtnClick = (type) => {
  managePlugin.titleActionRender(type)
  pageData.dialogVisible = true
}

//设置页面的事件
const settingActionClick = (path) => {
  mRouter.push(path)
  pageData.dialogVisible = false
}

const closeApp = async () => {
  await managePlugin.closeAppRender()
}

const titleActionLayoutStyle = computed(() => {
  return {
    marginLeft: pageData.platform == 'mac' ? "80px" : '20px'
  }
})

onMounted(async () => {
  console.log('App mounted')
  const isBuild = process.env.NODE_ENV === 'production'
  let version = await managePlugin.getAppVersionRender()
  pageData.title = isBuild ? `项目管理 v${version}` : `项目管理_dev v${version}`
  pageData.platform = await managePlugin.getPlatformRender()
})
</script>

<style scoped lang="less">
.title-bar-layout {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 30px;
  color: white;
  font-size: 13px;
  background: #292928;

  .title-left-action-layout {
    margin-left: 80px;
    z-index: 20;
  }

  .title-left-action-layout > * {
    margin-right: 15px;
  }

  .title-text-view {
    flex: 1;
    padding-right: calc(80px + 10px + 15 * 2px);
    text-align: center;
    -webkit-app-region: drag;
    cursor: move;
  }
}

.project-setting-layout {
  .project-setting-item {
    margin-top: 10px;
    margin-left: 0 !important;
  }
}
</style>
